<template>
  <button
    :class="buttonClasses"
    :disabled="disabled"
    :type="type"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  variant: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'text'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'button',
    validator: (value) => ['button', 'submit', 'reset'].includes(value)
  }
});

const emit = defineEmits(['click']);

const buttonClasses = computed(() => {
  return [
    'base-button',
    `base-button--${props.variant}`,
    {
      'base-button--disabled': props.disabled
    }
  ];
});

const handleClick = (event) => {
  if (!props.disabled) {
    emit('click', event);
  }
};
</script>

<style scoped>
.base-button {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-smooth);
  outline: none;
  white-space: nowrap;
}

/* Primary variant - 主要按钮 */
.base-button--primary {
  background-color: var(--primary-color);
  color: var(--neutral-light);
}

.base-button--primary:hover:not(.base-button--disabled) {
  background-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.base-button--primary:active:not(.base-button--disabled) {
  background-color: var(--primary-dark);
  transform: translateY(0);
}

.base-button--primary:focus:not(.base-button--disabled) {
  box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.2);
}

/* Secondary variant - 次要按钮 */
.base-button--secondary {
  background-color: var(--neutral-light);
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.base-button--secondary:hover:not(.base-button--disabled) {
  background-color: var(--primary-color);
  color: var(--neutral-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.base-button--secondary:active:not(.base-button--disabled) {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(0);
}

.base-button--secondary:focus:not(.base-button--disabled) {
  box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.2);
}

/* Text variant - 文本按钮 */
.base-button--text {
  background-color: transparent;
  color: var(--primary-color);
  padding: var(--spacing-sm) var(--spacing-md);
}

.base-button--text:hover:not(.base-button--disabled) {
  background-color: rgba(22, 93, 255, 0.08);
  color: var(--primary-dark);
}

.base-button--text:active:not(.base-button--disabled) {
  background-color: rgba(22, 93, 255, 0.15);
}

.base-button--text:focus:not(.base-button--disabled) {
  box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
}

/* Disabled state - 禁用状态 */
.base-button--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.base-button--primary.base-button--disabled {
  background-color: var(--neutral-gray);
}

.base-button--secondary.base-button--disabled {
  border-color: var(--neutral-gray);
  color: var(--neutral-gray);
}

.base-button--text.base-button--disabled {
  color: var(--neutral-gray);
}
</style>
